<!DOCTYPE html>

<html>
    
    <head>
        
        <meta charset="utf-8">
        <title>WebFile Example</title>
        <style type="text/css">
            
            * { 
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                -ms-box-sizing: border-box;
                box-sizing: border-box;
            }
            
            body {
                font-family: "Meiryo", sans-serif;
                font-size: 13px;
                line-height: 1.5em;
                background: white;
            }
            
            
            h1 a, h2 a, h3 a {
                text-decoration: none;
            }
            
            h1 {
                line-height: 1em;
            }
            
            h2 {
                line-height: 1.5em;
                padding: 4px;
                border-left: solid 0.5em black;
                border-top: solid 1px black;
                border-bottom: solid 1px black;
            }
            
            
            /**
             *     header
             */
            #header {
                color: white;
                
                padding: 1em;
                background: blue;
                background: -webkit-linear-gradient(top, #3c669c 0%, #1375ca 50%, #1f7bca 51%, #82bcea 100%);
                background: -moz-linear-gradient(top, #3c669c 0%, #1375ca 50%, #1f7bca 51%, #82bcea 100%);
                background: -o-linear-gradient(top, #3c669c 0%, #1375ca 50%, #1f7bca 51%, #82bcea 100%);
                background: -ms-linear-gradient(top, #3c669c 0%, #1375ca 50%, #1f7bca 51%, #82bcea 100%);
                background: linear-gradient(top, #3c669c 0%, #1375ca 50%, #1f7bca 51%, #82bcea 100%);
            }
            
            #header, #main, #footer {
                margin: 0px auto;
                width: 900px;
            }
            
            /**
             *     main
             */
            #main {
                margin-top: 2em;
                margin-bottom: 2em;
            }
            #content {
                width: 900px;
                padding: 5px;
            }
            
            #main-ta {
                display: block;
                width: 100%;
                margin: 0px auto;
                padding: 4px;
                border: solid 2px black;
                border-radius: 2px;
            }
            
            #file-name {
                font-size: 16px;
                text-align:center;
                color: white;
                background-color: black;
                
                border: solid 1px black;
                border-bottom:0px;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
                
                width: 80px;
                margin-left: 8px;
                padding: 4px;
            }
            
            #content .button {
                width: 80px;
                margin: 4px;
            }
            
            /**
             *     footer
             */
            #footer {
                color: white;
                text-align: center;
                
                padding: 1em;
                background: blue;
                background: -webkit-linear-gradient(top, #3c669c 0%, #1375ca 50%, #1f7bca 51%, #82bcea 100%);
                background: -moz-linear-gradient(top, #3c669c 0%, #1375ca 50%, #1f7bca 51%, #82bcea 100%);
                background: -o-linear-gradient(top, #3c669c 0%, #1375ca 50%, #1f7bca 51%, #82bcea 100%);
                background: -ms-linear-gradient(top, #3c669c 0%, #1375ca 50%, #1f7bca 51%, #82bcea 100%);
                background: linear-gradient(top, #3c669c 0%, #1375ca 50%, #1f7bca 51%, #82bcea 100%);
            }
            
        </style>
        
        <script type="text/javascript" src="./tm.webfile.js"></script>
        <script>
            var $id     = function(id)  { return document.getElementById(id); }
            var $class  = function(c, i){ i=i||0; return document.getElementsByClassName(c)[i]; }
            var $classes= function(c)   { return document.getElementsByClassName(c); }
            
            var saveFile = function(){
                // データ取得
                var name = $id("file-name").innerHTML;
                var data = $id("main-ta").value;
                // 書き込み専用としてファイルを開く
                var file = new tm.WebFile(name, 'w');
                file.write(data);
                file.close();
                
                alert("テキストエリアの内容を保存しました.");
            };
            
            var openFile = function(){
                var name = $id("file-name").innerHTML;
                // 読み込み専用としてファイルを開く
                var file = new tm.WebFile(name, 'r');
                $id("main-ta").value = file.read();
                file.close();
            };
            
            window.addEventListener("load", function(){
                openFile();
            }, false);
        </script>
        
    </head>
    
    <body>
        <header id="header">
            <h1>WebFile Example</h1>
            
            <p>
                このプログラムは WebFile クラスを使った例です.
                この例では, テキストエリアにテキストを書いた後, Save ボタンを押すとファイルを保存します.
                次回, このページを開いた際に保存した内容を再表示することができます.
            </p>
        </header>
        
        <div id="main">
            <section id="content">
                <header>
                    <h2>Editor</h2>
                </header>
                
                <div id="file-name">Test.txt</div>
                <textarea id="main-ta" rows="32" cols="80" wrap="off"></textarea>
                
                <footer style="text-align:right">
                    <button id="save" class="button" onclick="saveFile();">Save</button>
                    <button id="test" class="button" onclick="tm.WebFile.test();">Test</button>
                </footer>
            </section>
        </div>
        
        <footer id="footer">
            <p>
                WebFile クラスは localStorage をラップしたシンプルなクラスです.
                使い方たは C言語や Python の file クラスに似せています.
            </p>
            <p>このプログラムについての解説は<a href="#">こちら</a></p>
        </footer>
        
    </body>
    
</html>



